<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 1200px;
            height: 600px;
            background-color: pink;
            margin: 300px auto;

        }

        span {
            display: none;
            position: fixed;
            bottom: 150px;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: purple;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            // 也可以页面一加载直接跳转到相应区域 其实就是让滚动条滚动到距离顶部100px的位置
            $(document).scrollTop(100)
            // 大盒子距离文档头部的距离
            var boxTop = $('div').offset().top
            // 页面滚动事件
            $(window).scroll(function () {
                // console.log(11);
                // 如果滚动条滚动到大盒子的位置 就让小盒子淡入显示出来否则淡出
                if ($(document).scrollTop() >= boxTop) {
                    $('span').fadeIn()
                } else {
                    $('span').fadeOut()
                }
            })
            // 当我们点击返回顶部时 则使用动画函数返回文档顶部
            $('span').click(function () {
                // stop()清除动画队列 
                // animate动画函数只能是元素去使用 文档document是不可以使用的，可以用body,html替代。
                $('body ,html').stop().animate({
                    scrollTop: 0
                })
            })

        })
    </script>
</head>

<body>
    <div></div>
    <span>返回顶部</span>
</body>

</html>